<template>
    <div>
        <p>饼图主要用于表现不同类目的数据在总和中的占比。每个的弧度表示数据数量的比例。</p>
        <select v-model="pieType" @change="show">
            <option value="">请选择饼图类型</option>
            <option value="baseOption">基础饼图</option>
            <option value="circleOption">圆环图</option>
            <option value="roseOption">南丁格尔玫瑰图</option>
        </select>

        <div class="main" ref="main" v-show="isShow"></div>
    </div>
</template>

<script>
    import * as echarts from "echarts";

    export default {
        name: "PieView",
        data(){
            return {
                myChart : null,
                pieType: "",
                isShow :false,
                // 饼状图不再需要配置坐标轴，而是把数据名称和值都写在系列中
                baseOption:{
                    series : [
                        {
                            type: "pie",
                            data: [
                                {
                                    value: 188,
                                    name: '青少年'
                                },
                                {
                                    value: 335,
                                    name: '青年'
                                },
                                {
                                    value: 234,
                                    name: '中年'
                                },
                                {
                                    value: 688,
                                    name: '老年'
                                }
                            ],
                            radius : '70%',
                            label : {
                                show : true
                            }
                        }
                    ]
                },
                // 环形图
                circleOption:{
                    legend :{  // 图例配置
                        orient: 'vertical',
                        x: 40,
                        y: "center"
                    },
                    tooltip:{},
                    title : {
                        text : "饼状图",
                        left : "center",
                        top : 20
                    },
                    series : [
                        {
                            type: "pie",
                            data: [
                                {
                                    value: 188,
                                    name: '青少年'
                                },
                                {
                                    value: 335,
                                    name: '青年'
                                },
                                {
                                    value: 234,
                                    name: '中年'
                                },
                                {
                                    value: 688,
                                    name: '老年'
                                }
                            ],
                            radius : ['40%', '70%'],  // 环形图的核心（设置内外两个半径）
                            label: {
                                show: false,
                                position: 'center'
                            },
                            // 鼠标选中时对标签的操作
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '30',
                                    fontWeight: 'bold',
                                }
                            },
                            avoidLabelOverlap: false,
                            labelLine: {
                                show: true
                            }
                        }
                    ]
                },
                // 南丁格尔玫瑰图
                roseOption :{
                    tooltip :{
                      trigger : "item"
                    },
                    series : [
                        {
                            type: 'pie',
                            roseType: 'area',
                            data: [
                                {
                                    value: 100,
                                    name: 'A'
                                },
                                {
                                    value: 200,
                                    name: 'B'
                                },
                                {
                                    value: 300,
                                    name: 'C'
                                },
                                {
                                    value: 400,
                                    name: 'D'
                                },
                                {
                                    value: 500,
                                    name: 'E'
                                }
                            ]
                        }
                    ]
                }
            }
        },
        mounted(){
            // this.myChart = echarts.init(this.$refs.main);
            // this.myChart.setOption(this.baseOption); // 基础饼图
            // this.myChart.setOption(this.circleOption); // 基础饼图
            // this.myChart.setOption(this.roseOption); // 南丁格尔玫瑰图
        },
        beforeDestroy(){
            if(this.myChart)  this.myChart.dispose();
        },
        methods :{
            show(){
                if(this.myChart){
                    this.myChart.dispose();
                    this.isShow= false;
                }
                if(this.pieType){
                    this.myChart = echarts.init(this.$refs.main);
                    this.myChart.setOption(this[this.pieType]);
                    this.isShow= true;
                }
            }
        }
    }
</script>

<style scoped>
    .main {
        width: 60vw;
        height: 550px;
        box-shadow: 1px 1px 10px #333;
        margin: 20px auto;
    }
</style>